<template>
  <el-row>
    <img src="../assets/images/logo.png" alt="" class="logo">
    <div class="content">
      <h1>中汇集团综合管理系统</h1>
      <el-form :model="formData" label-width="auto" ref="myForm" :rules="rules">
        <el-form-item prop="username">
          <el-icon><User /></el-icon>
          <el-input placeholder="用户名" v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-icon><Lock /></el-icon>
          <el-input placeholder="密码" v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goLoginFun(myForm)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-row>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { goLogin } from '@/components/Login/Login';
import { ElMessage } from 'element-plus';
let router = useRouter()
let myForm = ref("")
let formData = reactive({
  username:"",
  password:""
})
const rules = reactive({
  username:[{required:true,message:'请输入账号',trigger:'blur'}],
  password:[{required:true,message:'请输入密码',trigger:'blur'}]
})
//点击去登陆
let goLoginFun = (formEl) => {
  formEl.validate(valid => {
    if(valid){
      //接口
      goLogin(formData)
      .then(res => {
        if(res.code === 200){

          sessionStorage.setItem('token',res.dataset.token)
          sessionStorage.setItem('phone',res.dataset.user.phone)
          if(res.dataset.user.status==0){
             ElMessage.success('登录成功')
              setTimeout(() => {
              router.push({
                path:"/HomePage"
              })
            },1000)
          }else{
            ElMessage.error('登录失败')
          }
          
        }
      })
    }
  })
}
</script>

<style lang="less" scoped>
  .el-row{
    width:100%;
    height:100%;
    background: url("@/assets/images/bg.png") no-repeat;
    background-size: 47% 85%;
    background-position: 0 100%;
    position: relative;
    .logo{
      width:155px;
      height:50px;
      margin-top:30px;
      margin-left:50px;
    }
    .content{
      h1{
        font-size: 45px;
      }
      width:40%;
      height:45%;
      position: absolute;
      top:240px;
      right:190px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .el-form{
        width:45%;
        position: relative;
        font-size:12px;
        .el-icon svg{
          position: absolute;
          top:23px;
          z-index: 100;
          left:9px;
          color:#9f9f9f;
        }
        :deep(.el-input)::-webkit-input-placeholder{
          font-size:12px;
        }
        .el-button{
          width:85%;
          height:40px;
          background-color: blue;
          border-radius: 40px;
          font-size: 17px;
          font-weight: 600;
          display: block;
          margin:0 auto;
          margin-top:30px;
        }
      }
      :deep(.el-input__wrapper){
        padding:1px 10px 1px 30px;
      }
    }
  }
</style>
